<template>
  <div class="min-h-screen flex flex-col">
    <HeroSection />
    
    <main class="flex-grow container mx-auto px-4 py-12">
      <!-- 热门城市部分 -->
      <section class="mb-16">
        <div class="flex justify-between items-center mb-8">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark">热门旅游城市</h2>
          <router-link 
            to="/search" 
            class="text-primary hover:text-primary/80 transition-colors flex items-center"
            @click="setSearchQuery('')"
          >
            查看全部 <i class="fa fa-arrow-right ml-2"></i>
          </router-link>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          <CityCard 
            v-for="city in cities" 
            :key="city.id" 
            :city="city" 
            @toggle-favorite="toggleFavorite"
          />
        </div>
      </section>
      
      <!-- 旅游攻略部分 -->
      <section class="mb-16 bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl p-8">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-6">旅游攻略</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/id/1056/600/400" alt="旅行准备" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">旅行前的准备</h3>
              <p class="text-gray-600 mb-4">了解目的地的文化、气候和签证要求，准备必要的旅行文件。</p>
              <a href="#" class="text-primary hover:text-primary/80 font-medium inline-flex items-center">
                阅读更多 <i class="fa fa-long-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/id/1057/600/400" alt="美食推荐" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">各地美食推荐</h3>
              <p class="text-gray-600 mb-4">探索世界各地的特色美食，从巴黎的甜点到东京的寿司。</p>
              <a href="#" class="text-primary hover:text-primary/80 font-medium inline-flex items-center">
                阅读更多 <i class="fa fa-long-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg">
            <img src="https://picsum.photos/id/1058/600/400" alt="摄影技巧" class="w-full h-48 object-cover">
            <div class="p-6">
              <h3 class="text-xl font-bold mb-2">旅行摄影技巧</h3>
              <p class="text-gray-600 mb-4">学习如何捕捉美丽的风景和难忘的旅行瞬间。</p>
              <a href="#" class="text-primary hover:text-primary/80 font-medium inline-flex items-center">
                阅读更多 <i class="fa fa-long-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 用户评价部分 -->
      <section>
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-8">用户评价</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <TestimonialCard 
            v-for="(testimonial, index) in testimonials" 
            :key="testimonial.id" 
            :testimonial="testimonial" 
            :city="cities[index % cities.length]"
          />
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    
    // 获取城市数据
    const cities = computed(() => store.getters.allCities);
    
    // 获取所有评价
    const testimonials = computed(() => {
      return cities.value.flatMap(city => city.testimonials);
    });
    
    // 切换收藏状态
    const toggleFavorite = (cityId) => {
      if (store.getters.isCityFavorite(cityId)) {
        store.dispatch('removeFromFavorites', cityId);
      } else {
        store.dispatch('addToFavorites', cityId);
      }
    };
    
    // 设置搜索查询
    const setSearchQuery = (query) => {
      store.dispatch('setSearchQuery', query);
    };
    
    return {
      cities,
      testimonials,
      toggleFavorite,
      setSearchQuery
    };
  }
};
</script>

<style scoped>
.testimonial-card {
  transition: all 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}
</style>
